<docs>
  ## 简历
</docs>
<template>
  <div :class="[temGreen == 1?'green':'blue']">
    <div class="beijingtu"></div>
    <div class="bg_g">
      <div class="describe1">
        <!-- 头部个人信息 -->
        <div class="title" style="color:white">
          <label class="person" for="id_avatar" style="display:block">
            <img v-if="!imgShow" class="person" :src="imgSrc" alt />
            <img v-else="imgShow" src="~common/images/tx.png" alt />
          </label>
          <div class="name clearfix">{{data.xm}}</div>
          <div
            class="personal clearfix"
          >{{data.xbmc}} | {{data.nl}}岁 | {{data.mzmc}} | {{data.zzmmmc}} | {{data.xlmc}}</div>
        </div>
        <!-- 求职意向 -->
        <div v-show="jlxx.qzyx">
          <div class="qz">求职意向</div>
          <!-- 求职意向岗位 -->
          <div class="gang clearfix">
            <ul>
              <li>{{jlxx.qzyx&&jlxx.qzyx.qwhymc}}</li>
              <li>{{jlxx.qzyx&&jlxx.qzyx.qwqzddmc}}</li>
              <li>{{jlxx.qzyx&&jlxx.qzyx.qwgw}}</li>
              <li>{{jlxx.qzyx&&jlxx.qzyx.qwxzq}}元-{{jlxx.qzyx&&jlxx.qzyx.qwxzz}}元</li>
            </ul>
          </div>
        </div>
        <!-- 基础信息 -->
        <div class="box1">
          <!-- 基础信息 Basic information-->
          <div class="basic cen">基础信息</div>
          <!-- <div class="box1_float clearfix"> -->
          <div class="box1_center" v-show="data.syszd">
            生源所在地&nbsp;
            <span>{{data.syszdmc}}</span>
          </div>
          <div class="box1_center" v-show="data.qcjz">
            驾照&nbsp;
            <span>{{data.qcjzmc}}</span>
          </div>
          <!-- </div> -->
          <!-- <div class="box1_float clearfix"> -->
          <!-- <div class="box1_center">
          原户籍
          <span>{{data.yhjmc}}</span>
          </div>-->
          <div class="box1_center" v-show="data.byxx">
            毕业学校&nbsp;
            <span>{{data.byxx}}</span>
          </div>
          <div class="box1_center" v-show="data.bysj">
            毕业时间&nbsp;
            <span>{{data.bysj}}</span>
          </div>
          <div class="box1_center" v-show="data.sxzy">
            所学专业&nbsp;
            <span>{{data.sxzymc}}</span>
          </div>
          <div class="box1_center" v-show="data.sg">
            身高&nbsp;
            <span>{{data.sg}}cm</span>
          </div>
          <div class="box1_center" v-show="data.tz">
            体重&nbsp;
            <span>{{data.tz}}kg</span>
            <!-- </div> -->
          </div>
          <div class="box1_center" v-show="data.jzdz">
            居住地址&nbsp;
            <span>{{data.jzdz}}</span>
          </div>
          <div class="box1_center" v-show="data.sj">
            手机号码&nbsp;
            <span>{{data.sj}}</span>
          </div>
          <div class="box1_center" v-show="data.jtdh">
            家庭电话&nbsp;
            <span>{{data.jtdh}}</span>
          </div>
          <div class="box1_center" v-show="data.yx">
            电子邮箱&nbsp;
            <span>{{data.yx}}</span>
          </div>
        </div>
        <!-- 培训经历 -->
        <div class="box1 clearfix" v-show="jlxx.pxjl.length">
          <div class="basic cen">培训经历</div>
          <div class="left clearfix">
            <div v-for="(item,index) in jlxx.pxjl" :key="index">
              <!-- 球 -->
              <div class="ball"></div>
              <!-- 虚线 -->
              <div class="line clearfix" v-show="index<jlxx.pxjl.length-1"></div>
              <!-- 球 -->
              <!-- <div class="ball"></div> -->
            </div>
          </div>
          <!--  培训经历一 -->
          <div class="box1_ clearfix" v-for="(item,index) in jlxx.pxjl" :key="index">
            <div class="box1_center">{{item.pxkssj}}至{{item.pxjssj}}</div>
            <div class="box1_center" style="color:#333333">{{item.pxxxmc}}</div>
            <div class="box1_center marbotom">{{item.pxjn}}</div>
          </div>
        </div>
        <!-- 工作经历 -->
        <div class="box1" v-show="jlxx.gzjl.length">
          <div class="basic cen">工作经历</div>
          <div class="left clearfix" v-for="(item,index) in jlxx.gzjl" :key="index">
            <!-- 球 -->
            <!-- <div class="ball"></div> -->
            <!--  虚线 -->
            <div class="line clearfix" v-show="index<jlxx.gzjl.length-1"></div>
            <!-- 球 -->
            <div class="ball"></div>
          </div>
          <!--  教育经历一 -->
          <div
            class="box1_ clearfix"
            style="float:left;"
            v-for="(item,index) in jlxx.gzjl"
            :key="index"
          >
            <div class="box1_center">{{item.gzkssj}}至{{item.gzjssj}}</div>
            <div class="box1_center" style="color:#333333">{{item.zw}}</div>
            <div class="box1_center marbotom">{{item.dwmc}}</div>
          </div>
        </div>
        <!-- 语言能力 -->
        <div class="box1" v-show="jlxx.yynl.length">
          <div class="basic cen">语言能力</div>
          <div class="left clearfix" v-for="(item,index) in jlxx.yynl" :key="index">
            <!-- 球 -->
            <!-- <div class="ball"></div> -->
            <!--  虚线 -->
            <div class="line clearfix" v-show="index<jlxx.yynl.length-1"></div>
            <!-- 球 -->
            <div class="ball"></div>
          </div>
          <!--  教育经历一 -->
          <div
            class="box1_ clearfix"
            style="float:left;"
            v-for="(item,index) in jlxx.yynl"
            :key="index"
          >
            <div class="box1_center">{{item.yzmc}}</div>
            <div class="box1_center">{{item.djmc}}</div>
          </div>
        </div>
        <!-- 自我描述 -->
        <div class="box1" v-show="jlxx.zwpj">
          <div class="basic cen">自我描述</div>
          <div class="box1_center line_height" style="margin:0;word-wrap:break-word;">
            <co-area v-model="jlxx.zwpj" maxlength="200"></co-area>
          </div>
        </div>
        <!-- 底部的图 -->

        <!-- bar 功能导航 -->
      </div>
    </div>
    <div class="bottom"></div>
  </div>
</template>
<script>
import $ from "@/common/js/axios";
import coform from "@/base/form/form";
import coInput from "@/base/form/input";
// import coArea from "@/base/form/textarea";
import coSelect from "@/base/form/select";
import coArea from "@/base/form/textarea";
export default {
  components: { coform, coInput, coSelect, coArea },

  data() {
    return {
      imgSrc: "",
      imgSrcName: "",
      imgShow: true,
      temGreen: "",
      health: 80,
      flag: false,
      index: 0,
      //保存基本信息
      data: {
        grid: "",
        txurl: "",
        xm: "",
        csny: "",
        xb: "",
        xbmc: "",
        mz: "",
        mzmc: "",
        zzmm: "",
        zzmmmc: "",
        xl: "",
        xlmc: "",
        pyfs: "",
        pyfsmc: "",
        byxx: "",
        bysj: "",
        sxzy: "",
        syszd: "",
        syszdmc: "",
        qcjz: "",
        qcjzmc: "",
        yhj: "",
        yhjmc: "",
        sg: "",
        tz: "",
        sfzhm: "",
        sj: "",
        jtdh: "",
        yx: "",
        jzdz: null
      },

      jlxx: {
        jbxx: "", // 基本信息
        qzyx: "", //求职意向
        gzjl: [], // 工作经历
        jyjl: [], //教育经历
        pxjl: [], //培训经历
        zs: [],
        yynl: [], //语言能力
        jlid: "",
        grid: "",
        jlmbys: "",
        zwpj: "" //自我评价
      }
    };
  },
  methods: {
    // 个人简历信息查询
    getjlxxcx() {
      this.$loading = true;
      $.get("/wdjl/jlxxCx").then(res => {
        this.$loading = false;
        this.jlxx = res.returnData.jlxx;
        //  简历模板判断
        this.temGreen = this.jlxx.jlmbys || 0;
        this.data = res.returnData.jlxx.jbxx;
        this.imgSrcName = res.returnData.jlxx.jbxx.txurl;
        if (this.imgSrcName) {
          this.imgSrc = conf.urlPrefix + "/sysfiles/tx/" + this.imgSrcName;
          this.imgShow = false;
        }
      });
    }
  },
  created() {
    this.getjlxxcx();
  }
};
</script>
<style lang="scss" scoped>
@import "../../common/scss/mixin";
.beijingtu {
  width: 100%;
  height: 880px;

  position: absolute;
  z-index: -9000;
  margin-top: -1.7rem;
}
.bottom {
  width: 100%;
  height: 190px;
  position: fixed;
  bottom: 0;
}
.color3 {
  color: #333333;
}
.box1_ {
  margin-left: 76px;
  // margin-bottom: 1rem;
}
.cen {
  text-align: center;
}
.h100 {
  height: 0.5rem;
}
.title {
  margin-top: 1rem;
  .person {
    // @include bg_color($background-color-theme);
    background: skyblue;
    width: 2.13333rem;
    height: 2.13333rem;
    border-radius: 50%;
    margin: auto;
    margin-bottom: 0.4rem;
  }
  img {
    width: 100%;
    height: 100%;
  }
  .name {
    display: flex;
    justify-content: center;
    font-size: 32px;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 24px;
    margin-bottom: 20px;
  }
  .personal {
    display: flex;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 32px;
  }
}
.marbotom {
  margin-bottom: 20px;
}
.bg_g {
  padding: 0 34px;
  overflow: hidden;
  position: relative;
}
.qz {
  // @include bg($background-color-theme);
  font-size: $font-size-small;
  // height: $padding-base-half*10;
  color: white;
  line-height: 50px;
  text-align: center;
  margin: auto;
  margin-bottom: 28px;
  position: relative;
}
.qz:before {
  content: "";
  border-top: 1px solid #dbdbdb;
  width: 32%;
  position: absolute;
  left: $font-size-large;
  top: $font-size-small;
}
.qz:after {
  content: "";
  border-top: 1px solid #dbdbdb;
  width: 32%;
  position: absolute;
  right: $font-size-large;
  top: $font-size-small;
}
.gang {
  margin: auto;
  padding: 0 34px;
  margin-bottom: 33px;
}
.gang li {
  float: left;
  // width: 160px;
  height: 62px;
  padding: 0 15px;
  margin-bottom: 15px;
  border-radius: 6px;
  background: rgba(224, 240, 255, 1);
  line-height: 62px;
  text-align: center;
  margin-left: 25px;
  font-size: 26px;
}
.box1 {
  padding: 0 38px 20px 38px;
  margin: 20px auto;
  background: white;
  overflow: hidden;
  position: relative;
  border-radius: 4px;
  .basic {
    width: $width-90 * 4;
    height: 60px;
    // border-radius: 50px;
    margin: 36px auto;
    line-height: 65px;
    font-size: $font-size-base;
    color: white;
    font-weight: bold;
  }
  .box1_center {
    color: gray;
    // margin: 20px;
    font-size: 26px;
    font-weight: 400;
    color: #999999;
    line-height: 55px;
  }
  .box1_center span {
    color: #333333;
    word-wrap: break-word;
    overflow: hidden; //超出的文本隐藏
  }
  .box1_float .box1_center {
    float: left;
  }
}
.left {
  // float:left;
  width: 50px;
  position: absolute;
  margin: 0.3rem;
  margin-right: 0.5rem;
  .ball {
    background: #2360fd;
    width: 26px;
    height: 26px;
    border-radius: 50%;
  }
  .line {
    border: 0.5px dashed #2360fd;
    width: 0px;
    height: 160px;
    margin-left: 12px;
  }
}
.language {
  float: left;
  margin-right: 0.5rem;
}

.process {
  width: 6rem;
  height: 16px;
  float: left;
  // border: black 1px solid;
  background: gainsboro;
  border-radius: 30px;
  margin-top: 8px;
}

.proc {
  height: 16px;
  background: url("../../common/images/health.png") no-repeat;
  background-size: 100%;
  // overflow: hidden;
  border-radius: 70px;
  .ball {
    width: 30px;
    height: 30px;
    background: url("../../common/images/button.png") no-repeat;
    background-size: 100% 100%;
    border-radius: 50%;
    float: right;
    margin-top: -10px;
  }
  .proficiency {
    margin-top: -0.6rem;
    width: 1rem;
  }
}
.line_height {
  line-height: 38px;
  text-indent: 2em;
}
.blue {
  .beijingtu {
    background: url("../../common/images/beijing.png") no-repeat;
    background-size: 100% 100%;
  }
  .bottom {
    background: url("../../common/images/bottom.png") no-repeat;
    background-size: 100%;
  }
  .basic {
    background: url("../../common/images/center.png") left center no-repeat;
    background-size: 100% 100%;
  }
}
.green {
  .beijingtu {
    background: url("../../common/images/bg3.png") no-repeat;
    background-size: 100% 100%;
  }
  .bottom {
    background: url("../../common/images/dbg3.png") no-repeat;
    background-size: 100%;
  }
  .basic {
    background: url("../../common/images/tit_bg.png") left center no-repeat;
    background-size: 100% 100%;
  }
  .ball {
    background-color: #00cccc;
  }
  .line {
    border: 0.5px dashed #00cccc;
  }
}
</style>
